<template>
    <view @touchstart="handleStart" @touchend="handleEnd">
        <slot></slot>
    </view>
</template>
<script>
export default {
    data() {
        return {
            startX:0,
            startY:0,
            startTime:0
        }
    },
    methods: {
        handleStart(event){
            // console.log("按下："+ event);
            // console.log("按下："+event.changedTouches[0].clientX);
            // console.log("按下："+event.changedTouches[0].clientY);
            this.startTime = Date.now();
            this.startX = event.changedTouches[0].clientX;
            this.startY = event.changedTouches[0].clientY;
        },
        handleEnd(event){
            // console.log("离开:"+event.changedTouches[0].clientX);
            // console.log("离开："+event.changedTouches[0].clientY);
            let endX = event.changedTouches[0].clientX;
            let endY = event.changedTouches[0].clientY;
            let endTime = Date.now();
            
            if(endTime - this.startTime > 3000) return ;

            if(Math.abs(endX - this.startX) < 50 || Math.abs(endY - this.startY) > 30) return ;

            let direction = endX - this.startX > 0 ? 'right':'left';
            // console.log(direction);
            this.$emit('swiperAction',{direction});
        }
    }
}
</script>
<style lang="scss" scoped>
    
</style>